<!--view标注名字首字母大写+d？-->
<!--图片标注名字首字母大写+pg？-->
<!--文本标注名字首字母大写+t？-->





<!--此文件为首页-->





<template>
<view>
  <view class="d1">
    <view class="d2">
      <view class="d7">
        <button class="zt12" @click="goto5('/pages/index/index_shijianshangbao')">1</button>
      </view>
      <image class="pg1" src="/static/pg1.png"></image>
      <view>
        <text class="t1">学生突发事件报告</text>
      </view>
      <image class="pg2" src="/static/pg2.png"></image>
      <image class="pg3" src="/static/pg3.png"></image>
      <text class="t3">
        事件上报
      </text>
      <text class="t2">
        INCIDENT REPORTING
      </text>
    </view>
    <view class="d3">
    <image class="pg4" src="/static/pg4.png"></image>
      <button class="zt10" @click="goto2('/pages/index/index_caogaoxiang')">草稿</button>
      <text class="t4">草稿箱</text>
      <text class="t5">DRAFTS</text>
    </view>
    <view class="d4">
    <image class="pg5" src="/static/pg5.png"></image>
      <button class="zt11" @click="goto4('/pages/index/index_fabu')">0</button>
      <text class="t6">立案审批</text>
      <text class="t7">FILING&APPROVAL</text>
    </view>
    <view class="d6">
      <button class="t8" @click="goto1('pages/index/index-weijiean')">未结案</button>
      <button class="t9" @click="goto3('pages/index/index-yijiean')">已结案</button>
    </view>
  </view>
  <view class="d5">
    <index-weijiean v-if="show1"/>
    <index-yijiean v-if="show3"/>
  </view>
  <view class="d1111">
    <image class="pg999" src="/static/pg999_00000.png"></image>
    <text class="tt12">事件报告</text>
    <image class="pg666" src="/static/pg666_00000.png"></image>
    <text class="tt13">更多功能</text>
  </view>
</view>


</template>

<script setup>
import {ref} from 'vue'
import IndexWeijiean from "./index-weijiean.vue";
import IndexYijiean from "./index-yijiean.vue";
const show1 = ref(false)
const show3 = ref(false)
const goto1 =(url)=>{
  show1.value =true;
  show3.value =false
}
const goto3 =(url)=>{
  show1.value =false;
  show3.value =true
}

  const show2 = ref(false)
  const goto2 = (url) =>{
    show2.value = true
    uni.navigateTo({
      url:'/pages/index/index_caogaoxiang'
    });
  }
  const show4 =ref(false)
  const goto4 = (url) =>{
    show4.value =true
    uni.navigateTo({
      url:'/pages/index/index_fabu'
    });

  }
const show5 =ref(false)
const goto5 = (url) =>{
  show4.value =true
  uni.navigateTo({
    url:'/pages/index/index_shijianshangbao'
  });

}

</script>

<style>
  .d1{
    width: 375px;
    height: 300px;
    background: #276eff;
    position: fixed;
    z-index: 2;
  }
  .pg1{
    width: 100%;
    height: 160px;
  }
  .t1{
    font-weight: 700;
    font-size: 17px;
    text-align: center;
    color: #ffffff;
    position: absolute;
    top: 50px;
    left: 115px;
  }
  .pg2{
    position: absolute;
    width: 310px;
    height: 80px;
    left: 26px;
    top: 100px;
  }
  .pg3{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 115px;
    left: 100px;
  }
  .t3{
    color: #743600;
    position: absolute;
    top: 120px;
    left: 170px;
    font-size: 18px;
  }
  .t2{
    color: #743600;
    position: absolute;
    top: 145px;
    left: 170px;
    font-size: 10px;
  }
  .d3{
    background-color: floralwhite;
    border-radius: 5px 5px 5px 5px;
    width: 145px;
    height: 70px;
    position: absolute;
    top: 190px;
    left: 27px;
  }
  .d4{
    background-color: floralwhite;
    border-radius: 5px 5px 5px 5px;
    width: 145px;
    height: 70px;
    position: absolute;
    top: 190px;
    right: 40px;
  }
  .d5{
    background-color: #f1f1f1;
    width: 100%;
    height: 500px;
    position: absolute;
    top: 300px;
    z-index: 0;
  }
  .pg4{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .t4{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    color: #1a1a1a;
    position: absolute;
    left: 65px;
    top: 15px;
  }
  .t5{
    font-weight: 400;
    font-size: 9px;
    text-align: left;
    color: #999;
    position: absolute;
    top: 38px;
    left: 65px;
  }
  .pg5{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .t6{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    color: #1a1a1a;
    position: absolute;
    left: 65px;
    top: 15px;
  }
  .t7{
    font-weight: 400;
    font-size: 9px;
    text-align: left;
    color: #999;
    position: absolute;
    top: 38px;
    left: 65px;
  }
  .d6{
    width: 100%;
    height: 50px;
    position: absolute;
    top: 250px;
    z-index: 2;
  }


  .t8{
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 40px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    transition: transform 0.2s ease;
  }
  .t8:active{
    transform: scale(1.1);
  }
  .t9{
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 140px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    transition:transform 0.2s ease;
  }
  .t9:active{
    transform: scale(1.1);
  }
  .zt10{
    background-color: firebrick;
    width: 145px;
    height: 70px;
    border-radius: 5px 5px 5px 5px;
    opacity: 0;
    z-index: 3;
  }
  .zt11{
    background-color: #4cd964;
    width: 145px;
    height: 70px;
    border-radius: 5px 5px 5px 5px;
    opacity: 0;
    z-index: 3;
  }
  .zt12{
    background-color: #4cd964;
    border-radius: 5px 5px 5px 5px;
    opacity:0;
    z-index: 3;
    position: absolute;
    width: 310px;
    height: 80px;
    left: 26px;
    top: 100px;
  }
.d1111{
  width: 100%;
  height: 70px;
  position: fixed;
  bottom: 0px;
  background-color: white;
}
.pg999{
  width: 900px;
  height: 500px;
  position: fixed;
  bottom: -205px;
  left: -220px;
}
  .pg666{
    width: 900px;
    height: 500px;
    position: fixed;
    bottom: -205px;
    left: -320px;
  }
  .tt12{
    position: fixed;
    left: 98px;
    bottom: 7px;
    font-size: 12px;
    color: #276eff;
  }
  .tt13{
    position: fixed;
    left: 228px;
    bottom: 7px;
    font-size: 12px;
    color: #969799;
  }
</style>
